<template>
  <view class="home">
    <view class="sec1">
      <view class="tiel">首页</view>
      <view class="banner">
        <swiper
          class="swiper"
          indicator-active-color="#fff"
          indicator-dots="true"
          circular
          autoplay="true"
          interval="3000"
          duration="1000"
        >
          <swiper-item
            v-for="(item, i) in banner"
            :key="i"
            @click="jumpBaner(item)"
          >
            <image
              :src="$IMG_URL + item.image"
              mode="widthFix"
              style="width: 100%"
            ></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="navList">
        <view
          class="prayList"
          v-for="(item, index) in prayList"
          :key="index"
          @click="prayListClick(index)"
        >
          <image :src="item.imgUrl" class="prayImg" mode="widthFix"></image>
          <text>{{ item.title }}</text>
        </view>
      </view>
    </view>
    <view class="sec2" @click="cleaClick()">
      <view class="lef">
        <image class="rili" src="../../static/rili.png" mode="widthFix" />
        <view class="foli">佛历</view>
        <view class="date">
          {{ nowTime }}
          <text> 农历{{ lunarcalendar }} </text>
        </view>
      </view>
      <image class="errow" src="../../static/errow.png" mode="widthFix" />
    </view>
    <view class="sec3">
      <view class="stitle">
        <view class="lef">精选好文</view>
        <view class="rig" @click="prayors">
          更多
          <image class="errow" src="../../static/errow.png" mode="widthFix" />
        </view>
      </view>
      <view
        class="lists"
        v-for="(item, index) in article"
        :key="index"
        @click="jumpDetail(item.id)"
      >
        <image class="img" :src="imgUrl + item.cover_image" mode="aspectFill" />
        <view class="rig">
          <view class="top">{{ item.title }}</view>
          <view class="bot">{{ item.createtime | formatDate }}</view>
        </view>
      </view>
    </view>
    <view class="sec4">
      <view class="lef" @click="prayListClick(2)">
        <h2>祈福话题类论坛</h2>
        <h3>你感兴趣的都在这里</h3>
        <view class="span">去看看</view>
        <image class="imglt" src="../../static/lticon.png" mode="widthFix" />
      </view>
      <view class="rig" @click="prayListClick(4)">
        <h2>邀请好友有礼</h2>
        <h3>好友下单可得佣金</h3>
        <view class="span">去邀请</view>
        <image class="imgjb" src="../../static/jbicon.png" mode="widthFix" />
      </view>
    </view>
    <view class="sec5">
      <view class="stitle">
        <view class="lef">在线祈福</view>
        <view class="rig" @click="prayor">
          更多
          <image class="errow" src="../../static/errow.png" mode="widthFix" />
        </view>
      </view>
      <view class="lists" v-for="(item, index) in qifuList" :key="index">
        <image
          class="imgs"
          :src="$IMG_URL + item.cover_image"
          mode="aspectFill"
        />
        <view class="rig">
          <view class="top">
            <h3>{{ item.title }}</h3>
            <h4>{{ item.description }}</h4>
          </view>
          <view class="bott">
            <view class="nums">
              <image
                class="canyIcon"
                src="../../static/canyIcon.png"
                mode="widthFix"
              />
              {{ item.join_num }}人参与
            </view>
            <view
              class="btns"
              @click="tooffering(item)"
              v-show="item.type == 1 ? true : false"
              >供奉</view
            >
            <view
              class="btns"
              @
              @click="tokaiguang(item)"
              v-show="item.type == 2 ? true : false"
              >开光</view
            >
          </view>
        </view>
      </view>
    </view>
    <!-- 开光弹出层 -->
    <uni-popup ref="kaiguang" type="center">
      <view class="duang">
        <view @click="tolongrange(kaigID)">远程开光</view>
        <view @click="tooffline(kaigID)">线下开光</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      banner: "",
      prayList: [
        {
          index: 0,
          imgUrl: require("../../static/x53.png"),
          title: "礼佛祈福",
        },

        {
          index: 1,
          imgUrl: require("../../static/x51.png"),
          title: "电子功德箱",
        },
        {
          index: 2,
          imgUrl: require("../../static/x52.png"),
          title: "社区论坛",
        },
        {
          index: 3,
          imgUrl: require("../../static/x5.png"),
          title: "方丈介绍",
        },
      ],
      qifuList: [],
      article: [],
      nowTime: "",
      lunarcalendar: "", // 农历
      imgUrl: "https://www.123qifu.com/",
      kaigID: "", //开光的祈福id
      init: false,
    };
  },
  onLoad() {
    this.getBanner();
    this.getqifuList();
  },
  onShow() {
    this.getEssay();
  },
  mounted() {
    this.addDate();
  },
  methods: {
    // 获取轮播
    async getBanner() {
      const res = await this.$myRequest({
        url: "index/getBanner",
        method: "POST",
        data: {
          type: 5, // 5首页轮播
        },
      });
      this.banner = res.data.data;
    },
    // 精选好文跳转详情
    jumpDetail(id) {
      uni.navigateTo({
        url: "./article/articleDetail?id=" + id,
      });
    },
    //礼佛祈福导航栏
    prayListClick(index) {
      if (index == 0) {
        uni.navigateTo({
          url: "../Buddha/Lifo",
        });
      } else if (index == 1) {
        uni.navigateTo({
          url: "../Buddha/Ectronic",
        });
      } else if (index == 2) {
        uni.navigateTo({
          url: "../community/community",
        });
      } else if (index == 3) {
        uni.navigateTo({
          url: "../Buddha/Fang",
        });
      } else if (index == 4) {
        uni.navigateTo({
          url: "../../pages/user/invitation/invitation",
        });
      }
    },

    //获取当前时间,农历
    async addDate() {
      let nowDate = new Date();
      let date = {
        month:
          nowDate.getMonth() + 1 < 10
            ? "0" + (nowDate.getMonth() + 1)
            : nowDate.getMonth() + 1,
        date:
          nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate(),
      };
      let nowTime = date.month + "月" + date.date + "日";
      this.nowTime = nowTime;

      let nongli = this.nowTime.replace(/日/g, "");
      nongli = nongli.replace(/([年月])/g, "-");
      nongli = "2021-" + nongli;
      let that = this;
      const res = await that.$myRequest({
        url: "index/getLaoHangLi",
        method: "POST",
        data: {
          date: nongli,
        },
      });
      that.lunarcalendar = res.data.data.yinli;
    },

    // 获取精选好文列表
    async getEssay() {
      let that = this;
      const res = await that.$myRequest({
        url: "index/getEssay",
        method: "POST",
        data: {
          pageSize: 4,
        },
      });
      that.article = res.data.data.data;
    },

    // 获取祈福列表
    async getqifuList() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/home",
        method: "GET",
        data: {
          pageSize: 4,
        },
      });
      that.qifuList = res.data.data.data;
    },

    // 去供奉
    tooffering(item) {
      uni.navigateTo({
        url: "../pray/Offering/Offering?id=" + item.id,
      });
      uni.setStorage({
        key: "gfList",
        data: item,
      });
    },

    //佛历
    cleaClick() {
      uni.navigateTo({
        url: "../ClearTime/ClearTime",
      });
    },

    //精选文章
    prayors() {
      uni.navigateTo({
        url: "./article/article",
      });
    },
    //在线祈福
    prayor() {
      uni.navigateTo({
        url: "./moreqifu/moreqifu",
      });
    },

    // 开光
    tokaiguang(item) {
      this.kaigID = item.id;
      // this.$refs.kaiguang.open();
      uni.navigateTo({
        url: "../pray/long-range/long-range?pray_id=" + this.kaigID,
      });
      uni.setStorage({
        key: "kgList",
        data: item,
      });
    },

    // 远程开光
    tolongrange(kaigID) {
      this.$refs.kaiguang.close();
      uni.navigateTo({
        url: "../pray/long-range/long-range?pray_id=" + kaigID + "&type=" + 1,
      });
    },

    // 线下开光
    tooffline(kaigID) {
      this.$refs.kaiguang.close();

      uni.navigateTo({
        // url: "../pray/kaiguang/kaiguang?pray_id=" + kaigID + "&type=" + 2,
        url: "../pray/long-range/long-range?pray_id=" + kaigID + "&type=" + 2,
      });
    },

    // 轮播图跳转
    jumpBaner(item) {
      if (item.id == 17) {
        uni.navigateTo({
          url: item.url,
        });
      } else {
        console.log(item.url);
        uni.switchTab({
          url: item.url,
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
.home {
  .sec1 {
    width: 100%;
    overflow: hidden;
    min-height: 400rpx;
    background: #fff;
  }
  .banner {
    width: 714rpx;
    height: 326rpx;
    margin: 0 auto;
    border-radius: 18rpx;
    overflow: hidden;
    .swiper {
      width: 100%;
      height: 100%;
    }
  }
  .tiel {
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
  }
  .navList {
    margin-top: 29rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 40rpx;
    margin-bottom: 30rpx;
    .prayImg {
      display: block;
      width: 92rpx;
      height: 92rpx;
      margin: 0 auto;
    }
    text {
      display: block;
      text-align: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #1b1b1b;
      margin-top: 10rpx;
    }
  }
  .sec2 {
    width: 100%;
    height: 82rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx auto 20rpx;
    .lef {
      display: flex;
      align-items: center;
      height: 100%;
      .rili {
        display: block;
        width: 30rpx;
        height: 30rpx;
        margin-right: 15rpx;
      }
      .foli {
        font-size: 30rpx;
        font-weight: 500;
        color: #c52b2e;
      }
      .date {
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
        position: relative;
        box-sizing: border-box;
        padding-left: 26rpx;
        margin-left: 15rpx;
        display: flex;
        align-items: center;
        text {
          margin-left: 15rpx;
        }
      }
      .date::before {
        position: absolute;
        content: "";
        width: 1rpx;
        height: 24rpx;
        background: #e8e8e8;
        border-radius: 1px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .errow {
      display: block;
      width: 12rpx;
      height: 20rpx;
    }
  }
  .sec3,
  .sec5 {
    width: 100%;
    min-height: 294rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 0 24rpx;
    overflow: hidden;
    .stitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 40rpx auto 12rpx;
      .lef {
        font-size: 34rpx;
        font-weight: 550;
        color: #333333;
        padding-left: 20rpx;
        position: relative;
      }
      .lef::before {
        position: absolute;
        content: "";
        width: 10rpx;
        height: 10rpx;
        background: #c52b2e;
        border-radius: 50%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .rig {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        .errow {
          display: block;
          width: 12rpx;
          height: 20rpx;
          margin-left: 11rpx;
        }
      }
    }
    .lists {
      width: 100%;
      box-sizing: border-box;
      padding: 28rpx 0;
      border-bottom: 1rpx solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .img {
        display: block;
        width: 180rpx;
        height: 154rpx;
        margin-right: 18rpx;
        border-radius: 8rpx;
      }
      .rig {
        height: 154rpx;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        .top {
          font-size: 28rpx;
          font-weight: 400;
          color: #373737;
          display: block;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
      .bot {
        font-size: 20rpx;
        font-weight: 400;
        color: #b7b7b7;
        display: block;
      }
    }
    .lists:last-child {
      border-bottom: none;
    }
  }
  .sec4 {
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .lef,
    .rig {
      width: 350rpx;
      height: 168rpx;
      background: #ffffff;
      border-radius: 15rpx;
      box-sizing: border-box;
      padding-left: 27rpx;
      overflow: hidden;
      position: relative;
      h2 {
        font-size: 34rpx;
        font-weight: 500;
        color: #c52b2e;
        margin-top: 25rpx;
      }
      h3 {
        font-size: 22rpx;
        font-weight: 400;
        color: #999999;
      }
      .span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 38rpx;
        background: #c52b2e;
        border-radius: 17rpx;
        text-align: center;
        font-size: 20rpx;
        font-weight: 400;
        color: #ffffff;
        margin-top: 15rpx;
      }
      .imglt {
        position: absolute;
        width: 100rpx;
        height: 70rpx;
        bottom: 20rpx;
        right: 13rpx;
      }
      .imgjb {
        position: absolute;
        width: 100rpx;
        height: 96rpx;
        bottom: 18rpx;
        right: 16rpx;
      }
    }
  }
  .sec5 {
    margin-bottom: 26rpx;
    .imgs {
      width: 180rpx;
      height: 200rpx;
      margin-right: 18rpx;
      border-radius: 8rpx;
    }
    .lists {
      .rig {
        height: 200rpx;
      }
    }
    .top {
      h3 {
        font-size: 30rpx;
        font-weight: 500;
        color: #373737;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      h4 {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        margin-top: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
    .bott {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .nums {
        display: flex;
        align-items: center;
        font-size: 20rpx;
        font-weight: 400;
        color: #999999;
        .canyIcon {
          display: block;
          width: 18rpx;
          height: 18rpx;
          margin-right: 10rpx;
        }
      }
      .btns {
        display: block;
        width: 114rpx;
        height: 50rpx;
        background: #c52b2e;
        border-radius: 25rpx;
        text-align: center;
        line-height: 50rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
.duang {
  width: 232rpx;
  height: 180rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #f7224e;
  position: relative;
  top: 400rpx;
}
</style>
